import React, {Component, useState} from 'react';
import {Button, Image, View} from '@tarojs/components';
import {AtDivider, AtTabs, AtTabsPane, AtFloatLayout, AtAvatar, AtIcon} from 'taro-ui'
import check from '../image/check-circle.png';
import invite from '../image/invite.png';
import write from '../image/write.png';
import del from '../image/del.png';
import Taro from '@tarojs/taro';

import NavBar from '../fit';
import './address.scss';

const Address = () => {

  const [isRight, setRight] = useState(true)
  const changeRight = () => {
    setRight(!isRight)
  }

  //新增地址
  const handleClick4 = () => {
    Taro.navigateTo({
      url: '/pages/my/necessary/newaddress'
    })
  }


  const handleClick6 = () => {
    Taro.navigateTo({
      url: '/pages/shareCard/shareCard'
    })
  }

  //我的地址
  const [list, setList] = useState(
    [
      {
        name: '姓名',
        tel: '电话号码',
        add: '地址地址地址地址地址地址地址地址'
      },
    ]
  )
  const List = list.map(content => (
    <View className="boxbox">
      <View className="box1">
        <View className="conname">{content.name}</View>
        <View className="tel">{content.tel}</View>
      </View>
      <View className="add">{content.add}</View>
      <AtDivider height="40"/>
      <View className="info">
        <View className="info-l">
          <View className="info-ll" onClick={() => {
            changeRight()
          }}>
            {isRight ? (
              <Image className="map-pin" style="width:20px;height:20px;" src={check}/>
            ) : (
              <Image className="map-pin1" style="width:20px;height:20px;" src={check}/>
            )}
          </View>
          <View className="info-lr">默认地址</View>
        </View>


        <View className="info-r">
          <Button className="info-rl"  openType="share">
            <Image style="width:20px;height:20px;" src={invite}/>
            <View className="info-rlz">分享</View>
          </Button>

          <view className="info-rz" onClick={handleClick4}>
            <Image style="width:20px;height:20px;" src={write}/>
            <View className="info-rlz">编辑</View>
          </view>
          <view className="info-rr">
            <Image style="width:20px;height:20px;" src={del}/>
            <View className="info-rlz">删除</View>
          </view>
        </View>
      </View>
    </View>
  ))

  const handleClick2 = () => {

  }
  const handleClick3 = () => {

  }

  const toBack = () => {
    Taro.navigateBack().then();
  }

  return (
    <View className="box">
      <NavBar
        title=" "
        back={true}
        nback={toBack}
      />
      <View className="box2">我的地址</View>
      <View className="box3">
        <View className="box3box">
          <View className="box31">
            {List}
          </View>

          <View className="box312">
            <Button className="box3121" onClick={handleClick2}>管理</Button>
            <Button className="box3122" onClick={handleClick4}>新增地址</Button>
          </View>
        </View>
      </View>

    </View>
  )
}
export default Address;
